<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>指标树管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <style>
    .page { display: flex; gap: 12px; padding: 12px; }
    .left { width: 320px; }
    .tree { margin-top: 8px; max-height: calc(100vh - 180px); overflow: auto; }
    .right { flex: 1; display: flex; flex-direction: column; gap: 12px; }
    .toolbar { padding: 6px 0; display: flex; gap: 8px; align-items: center; }
    .form-card { }
  </style>
</head>
<body>
  <div id="app">
    <div class="page">
      <div class="left">
        <el-input v-model="treeFilter" placeholder="搜索指标" size="small" clearable />
        <el-form :inline="true" size="small" class="toolbar">
          <el-form-item label="RootId">
            <el-input-number v-model="rootId" :min="1" />
          </el-form-item>
          <el-button type="primary" @click="loadTree">加载树</el-button>
          <el-button @click="expandAll(true)">展开</el-button>
          <el-button @click="expandAll(false)">折叠</el-button>
        </el-form>
        <el-tree
          ref="treeRef"
          class="tree"
          :data="treeData"
          :props="treeProps"
          node-key="id"
          highlight-current
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          @node-click="onNodeClick"
        />
      </div>
      <div class="right">
        <el-card class="form-card" shadow="hover">
          <template #header>节点信息</template>
          <el-form :model="form" label-width="110px" size="small">
            <el-form-item label="ID">
              <el-input v-model="form.id" disabled />
            </el-form-item>
            <el-form-item label="父节点ID">
              <el-input-number v-model="form.parentId" :min="1" :disabled="!!form.id" />
            </el-form-item>
            <el-form-item label="根节点ID">
              <el-input-number v-model="form.rootId" :min="1" />
            </el-form-item>
            <el-form-item label="方案ID">
              <el-input-number v-model="form.schemeId" :min="1" placeholder="可选" />
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="编码">
              <el-input v-model="form.code" />
            </el-form-item>
            <el-form-item label="是否叶子">
              <el-switch v-model="form.isLeaf" />
            </el-form-item>
            <el-form-item label="排序号">
              <el-input-number v-model="form.orderNum" :min="0" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.status" placeholder="选择状态" style="width: 160px;">
                <el-option :value="1" label="启用" />
                <el-option :value="0" label="停用" />
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSave">{{ form.id ? '更新' : '新增' }}</el-button>
              <el-button type="success" :disabled="!currentNode" @click="onAddChild">在当前节点下新增子节点</el-button>
              <el-button type="danger" :disabled="!currentNode" @click="onDelete">删除所选</el-button>
              <el-button @click="onReset">清空表单</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    const { createApp, ref, reactive, nextTick } = Vue;
    createApp({
      setup() {
        const http = axios.create({ baseURL: '/api' });
        http.interceptors.response.use((res) => {
          const data = res.data;
          if (data?.code && data.code !== 200 && data?.rows === undefined) {
            return Promise.reject(new Error(data?.msg || '请求失败'));
          }
          return data;
        });

        const treeRef = ref();
        const treeProps = { label: 'name', children: 'children' };
        const treeData = ref([]);
        const treeFilter = ref('');
        const rootId = ref(1);
        const currentNode = ref(null);

        const emptyForm = () => ({
          id: null, parentId: null, rootId: null, schemeId: null,
          name: '', code: '', isLeaf: false, orderNum: 0, status: 1, remark: ''
        });
        const form = reactive(emptyForm());

        const filterNode = (value, data) => {
          if (!value) return true;
          return (data.name || '').toLowerCase().includes(value.toLowerCase());
        };

        const loadTree = async () => {
          try {
            const res = await http.get('/assess/indicator/tree', { params: { rootId: rootId.value } });
            treeData.value = res;
            ElementPlus.ElMessage.success('加载成功');
          } catch (e) {
            ElementPlus.ElMessage.error(e.message || '加载树失败');
          }
        };

        const expandAll = (expand) => {
          nextTick(() => {
            const t = treeRef.value;
            if (!t) return;
            const traverse = (nodes) => {
              (nodes || []).forEach(n => {
                t.setExpanded(n, expand);
                traverse(n.children);
              });
            };
            traverse(treeData.value);
          });
        };

        const onNodeClick = (node) => {
          currentNode.value = node;
          form.id = node.id;
          form.parentId = node.parentId || null;
          form.rootId = rootId.value;
          form.schemeId = form.schemeId || null;
          form.name = node.name;
          form.code = node.code || '';
          form.isLeaf = !!node.isLeaf;
          form.orderNum = node.orderNum || 0;
          form.status = node.status ?? 1;
          form.remark = node.remark || '';
        };

        const onReset = () => {
          Object.assign(form, emptyForm());
          currentNode.value = null;
        };

        const onAddChild = () => {
          if (!currentNode.value) return;
          const pid = currentNode.value.id;
          Object.assign(form, emptyForm(), { parentId: pid, rootId: rootId.value });
        };

        const onSave = async () => {
          try {
            if (!form.name) return ElementPlus.ElMessage.warning('请输入名称');
            if (!form.code) return ElementPlus.ElMessage.warning('请输入编码');
            const payload = { ...form };
            if (payload.id) {
              await http.put('/assess/indicator', payload);
            } else {
              await http.post('/assess/indicator', payload);
            }
            ElementPlus.ElMessage.success('保存成功');
            await loadTree();
          } catch (e) {
            ElementPlus.ElMessage.error(e.message || '保存失败');
          }
        };

        const onDelete = async () => {
          if (!currentNode.value) return;
          try {
            await http.delete('/assess/indicator', { params: { idList: String(currentNode.value.id) } });
            ElementPlus.ElMessage.success('删除成功');
            onReset();
            await loadTree();
          } catch (e) {
            ElementPlus.ElMessage.error(e.message || '删除失败');
          }
        };

        return { treeRef, treeProps, treeData, treeFilter, rootId, currentNode, form, filterNode, loadTree, expandAll, onNodeClick, onAddChild, onSave, onDelete, onReset };
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>
</html>


